﻿
<template>
  <div class="Detail_Excahnge_contain" ref="Detail_Excahnge_contain">
      <div class="Detail_header">
        官方兑换
        <div class="Detail_goBack" v-on:click="hide_detail">
          <img src="../../../static/img/goback_detail.png">
        </div>
      </div>
      <div class="top_nav_Scroll">
        <Detail></Detail>
      </div>
      <div class="div_middle clearfix">
          <div class="div_middle_left">
              积分 <span>800</span>
          </div>
          <img src="../../../static/img/nav_fenhao.png" alt="Alternate Text" class="fenhao_img"/>
          <div class="div_middle_right">获赞数 888</div>
      </div>
      <div id="wrapper2" class="story_bottom">
        <div  id="scroller2" ref="el">
            <div class="inner_story_bottom_title">信物故事</div>
            <div class="inner_story_list">
              <p>诗经123456</p>
              <p>
                诗经》是中国古代诗歌开端
              </p>
              <p> 最早的一部诗歌总集。</p>
               <p> 诗经收集了西周初年至春秋中叶</p>
               <p>（前11世纪至前6世纪）的诗歌，</p>
                <p>共311篇，其中6篇为笙诗，即只有标题，</p>
               <p>没有内容，称为笙诗六篇</p>
                <p>诗经收集了西周初年至春秋中叶</p>
                <p>（前11世纪至前6世纪）的诗歌，</p>
                <p>共311篇，其中6篇为笙诗，即只有标题，</p>
                <p>没有内容，称为笙诗六篇.</p>
              <p> 诗经收集了西周初年至春秋中叶</p>
              <p>（前11世纪至前6世纪）的诗歌，</p>
              <p>共311篇，其中6篇为笙诗，即只有标题，</p>
              <p>没有内容，称为笙诗六篇</p>
              <p>诗经收集了西周初年至春秋中叶</p>
              <p>（前11世纪至前6世纪）的诗歌，</p>
              <p>共311篇，其中6篇为笙诗，即只有标题，</p>
              <p>没有内容，称为笙诗六篇.</p>
              <p class="bottom_10">&nbsp;</p>
            </div>
        </div>
      </div>
      <div class="Detail_bottom">

      </div>
    </div>
    
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import IScroll from "iscroll";
  //limit_Scroll
  import limit_scroll from "../../../static/js/limit_scroll.js"
  import Detail from "../scroll_view/Detail_nav.vue"

export default {
  name: 'Detail_Exchange',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      show_layer:false,
      get_layer_show:this.$store.getters.get_layer_show
    }
  },
  mounted: function () { 
    let myScroll = new IScroll('#wrapper2');
    limit_scroll(this.$refs.el, this.$refs.Detail_Excahnge_contain);
  },
  
  methods: {
    hide_detail: function () {
      window.removeEventListener('popstate', function () {
        history.pushState(null, null, document.URL);
      });
      this.$emit('hide_detail')
    }
  },
  components: {
    Detail
  }
}
</script>
<style scoped>
  .bottom_10{
    margin-bottom:0.75rem;
  } 
  .Detail_bottom {
    height: 2.25rem;
    box-shadow: 0 -2px 8px 1px rgba(128, 128, 128, 0.13);
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
    opacity: 0
  }
  /*story_bottom_title*/
  .inner_story_bottom_title {
    width: 30%;
    margin: 0 auto;
    margin-top: 0.7rem;
    margin-bottom: 0.9rem;
    position: relative;
    color: #9f5c2f;
    font-size: 1rem;
  }
  .inner_story_bottom_title:after {
    content: " ";
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: #9f5c2f;
    position: absolute;
    top: 50%;
    left: 0;
    transform:translateY(-50%)
  }
  .inner_story_bottom_title:before {
    content: " ";
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: #9f5c2f;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%)
  }
  /*scroll s*/
  body {
    /* On modern browsers, prevent the whole page to bounce */
    overflow: hidden;
  }

  #wrapper2 {
    position: relative;
    width: 100%;
    height: 12rem;
    overflow: hidden;
    /* Prevent native touch events on Windows */
    -ms-touch-action: none;
    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
  }
  .inner_story_list {
    font-size: 0.7rem;
    color: #b16a3b;
    line-height:2;
  }
  #scroller2 {
    width: 100%;
    position: absolute;
    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  }
  /*certain btn e*/
  /*scroll e*/

  /*contaienr s*/
  .Detail_Excahnge_contain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: #fff;
  }
  /*container e*/

  /*Detail_header s*/
  .Detail_header {
    height: 1.75rem;
    line-height: 2.4;
    background-color: #fff;
    text-align: center;
    color: #9f5c2f;
    font-size: 0.8rem;
    font-weight: 600;
    position: relative;
    box-shadow: 0 2px 6px 2px #808080;
  }

  .Detail_goBack {
    width: 5.5%;
    position: absolute;
    left: 3%;
    top: 0.4rem;
  }

    .Detail_goBack img {
      width: 100%;
      display: block;
    }

  .top_nav_Scroll {
    width: 100%;
  }

  .div_middle {
    height: 1.75rem;
    line-height: 2.6;
    font-size: 0.75rem;
    color: #9f5c2f;
    background-color: #fff;
    box-shadow: 0 2px 8px 2px rgba(128, 128, 128, 0.51);
  }

  .div_middle_left {
    float: left;
    padding-left: 5%;
  }

  .div_middle_right {
    float: right;
  }

  .fenhao_img {
    float: right;
    width: 6.4%;
    margin-top: 0.2rem;
    margin-right: 4%;
    margin-left: 4%;
  }

  .story_bottom {
    height: 12rem;
    margin-top: 0.2rem;
    overflow:scroll;
  }

  .story_title {
    height: 3rem;
  }
  /*Detail_header e*/

</style>